<!DOCTYPE html>
<html>
  <head>
    <title>Vimium Options</title>
    <meta charset="UTF-8">
    <meta name="color-scheme" content="light dark">
    <link rel="stylesheet" type="text/css" href="options.css">
    <link rel="stylesheet" type="text/css" href="../content_scripts/vimium.css" />
    <script src="options.js" type="module"></script>
  </head>

  <body class="vimium-body">
    <div id="wrapper">
      <header>Vimium Options</header>
      <input type="hidden" name="settingsVersion" />

      <div id="settings-grid-container">
        <h2>Excluded URLs and keys</h2>
        <div>
          <div id="exclusion-scroll-box">
            <table id="exclusion-rules">
              <tr>
                <td><span class="exclusion-header-text">Patterns</span></td>
                <td><span class="exclusion-header-text">Keys to exclude</span></td>
              </tr>
            </table>
          </div>
          <button id="exclusion-add-button">Add rule</button>
        </div>
        <div class="example">
          Disable Vimium on URLs.<br>
          "Patterns" are URL regular expressions. <code>*</code> will match zero or more characters.
          <br>
          "Keys": Vimium will exclude these keys and pass them through to the page.
        </div>

        <h2>Custom key mappings</h2>
        <textarea name="keyMappings" type="text"></textarea>
        <div class="example">
          Enter commands to remap your keys. Available commands:<br>
          <pre
            id="exampleKeyMapping"
          >
map j scrollDown
unmap j
unmapAll
" this is a comment
# this is also a comment</pre>
          <a href="/pages/command_listing.html" target="_blank">Show available commands</a>.
        </div>

        <h2>Custom search engines</h2>
        <textarea name="searchEngines"></textarea>
        <div class="example">
          Add search-engine shortcuts to the Vomnibar. Format:<br>
          <pre
          >
a: http://a.com/?q=%s
b: http://b.com/?q=%s description
" this is a comment
# this is also a comment</pre
          >
          %s is replaced with the search terms. <br>
          For search completion, see <a href="completion_engines_page.html" target="_blank"
          >here</a>.
        </div>

        <header>Advanced Options</header>

        <h2>Scroll step size</h2>
        <span>
          <input name="scrollStepSize" type="number" />px
        </span>
        <div class="example">
          The size for basic movements (usually j/k/h/l).
        </div>

        <div id="link-hint-characters-container">
          <h2>Characters used for link hints</h2>
          <div class="link-hint-characters-field">
            <input name="linkHintCharacters" type="text" />
            <div class="example reset-link"><a href="#">Reset</a></div>
          </div>
          <div class="example">
            The characters placed next to each link after typing "f" to enter link-hint mode.
          </div>
        </div>

        <div id="link-hint-numbers-container">
          <h2>Numbers used for link hints</h2>
          <div class="link-hint-characters-field">
            <input name="linkHintNumbers" type="text" />
            <div class="example reset-link"><a href="#">Reset</a></div>
          </div>
          <div class="example">
            The characters placed next to each link after typing "f" to enter link-hint mode.
          </div>
        </div>

        <div class="spacer"></div>

        <label>
          <input name="smoothScroll" type="checkbox" />
          Use smooth scrolling
        </label>
        <div class="example"></div>

        <h2></h2>
        <label>
          <input name="filterLinkHints" type="checkbox" />
          Use the link's name and characters for link-hint filtering
        </label>
        <div class="example">
          In link-hint mode, this option lets you select a link by typing its text.
        </div>

        <div id="wait-for-enter">
          <h2></h2>
          <label>
            <input name="waitForEnterForFilteredHints" type="checkbox" />
            Require <tt>Enter</tt> when filtering hints
          </label>
          <div class="example">
            You activate the link with <tt>Enter</tt>, <em>always</em>; so you never accidentally
            type Vimium commands.
          </div>
        </div>

        <h2></h2>
        <label>
          <input name="grabBackFocus" type="checkbox" />
          Don't let pages steal the focus on load
        </label>
        <div class="example">
          Prevent pages from focusing an input on load (e.g. Google, Bing, etc.).
        </div>

        <h2></h2>
        <label>
          <input name="hideHud" type="checkbox" />
          Hide the Heads Up Display (HUD) in insert mode
        </label>
        <div class="example">
          When enabled, the HUD will not be displayed in insert mode.
        </div>

        <h2></h2>
        <label>
          <input name="hideUpdateNotifications" type="checkbox" />
          Hide update notifications
        </label>
        <div class="example">
          When enabled, "Vimium has been updated" notifications will not be shown.
        </div>

        <h2></h2>
        <label>
          <input name="regexFindMode" type="checkbox" />
          Treat find queries as JavaScript regular expressions
        </label>
        <div class="example">
          Switch back to plain find mode by using the <code>\R</code> escape sequence.
        </div>

        <h2></h2>
        <label>
          <input name="ignoreKeyboardLayout" type="checkbox" />
          Ignore keyboard layout
        </label>
        <div class="example">
          This forces the use of <code>en-US</code> QWERTY layout and can be helpful for non-Latin
          keyboards.
        </div>

        <h2>Previous patterns</h2>
        <div>
          <input name="previousPatterns" type="text" />
          <div class="example reset-link"><a href="#">Reset</a></div>
        </div>
        <div class="example">
          The "navigate to previous page" command uses these patterns to find the link to follow.
        </div>

        <h2>Next patterns</h2>
        <div>
          <input name="nextPatterns" type="text" />
          <div class="example reset-link"><a href="#">Reset</a></div>
        </div>
        <div class="example">
          The "navigate to next page" command uses these patterns to find the link to follow.
        </div>

        <h2>New tab URL</h2>
        <div>
          <input name="newTabUrl" type="text" />
          <div class="example reset-link"><a href="#">Reset</a></div>
        </div>
        <div class="example">
          The page to open with the "create new tab" command. Set this to "<tt>pages/blank.html</tt
          >" for a blank page (except incognito mode).<br>
        </div>

        <h2>CSS for Vimium UI</h2>
        <div>
          <textarea name="userDefinedLinkHintCss" class="code" type="text"></textarea>
          <div class="example reset-link"><a href="#">Reset</a></div>
        </div>
        <div class="example">
          These styles are applied to link hints, the Vomnibar, the help dialog, the exclusions
          pop-up and the HUD.<br>
          By default, this CSS is used to style the characters next to each link hint.<br>
          <br>
          These styles are used in addition to and take precedence over Vimium's default styles.
        </div>

        <header>Backup and Restore</header>

        <h2>Backup</h2>
        <a id="download-backup" download="vimium-options.json" href="#">Download backup</a>
        <div class="example">Download a backup of your settings.</div>

        <h2>Restore</h2>
        <input id="upload-backup" type="file" accept=".json" />
        <div class="example">
          Choose a backup file to restore.
        </div>
      </div>

      <footer>
        <div id="footer-content">
          <div id="footer-help-text">
            Type <strong>?</strong> to show the help dialog.
            <br>
            Type <strong id="shortcut-to-save-all"></strong> to save all options.
          </div>
          <div id="footer-save-options">
            <button id="save" disabled="disabled">No changes</button>
          </div>
        </div>
      </footer>
    </div>

    <template id="exclusion-rule-template">
      <tr class="rule">
        <td>
          <input type="text" name="pattern" spellcheck="false" placeholder="URL pattern" />
        </td>
        <td>
          <input type="text" name="passKeys" spellcheck="false" placeholder="All" />
        </td>
        <td>
          <input type="button" class="remove" value="&#x2716;" />
        </td>
      </tr>
    </template>
  </body>
</html>
